<template>
  <div class="drawer-container">
    <el-drawer :model-value="isDialog" :title="title" :size="size" direction="rtl" class="demo-drawer"
      :destroy-on-close="true" :close-on-click-modal="false" :close-on-press-escape="false">
      <div class="drawer-out">
        <slot></slot>
        <div class="demo-drawer__footer">
          <el-button @click="cancelForm">取消</el-button>
          <el-button type="primary" @click="onClick(formRef)" :loading="loading">确认</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script setup>
import { ref, toRefs } from 'vue'
import { ElDrawer, ElMessageBox } from 'element-plus'


const props = defineProps({
  title: String,
  size: {
    type: String,
    default: '30%'
  },
});
const emits = defineEmits(['submit', 'clearForm'])

const isDialog = ref(false);
const loading = ref(false);
const { title, size, } = toRefs(props);
/** 点击确认 */
const onClick = async () => {
  emits('submit');
}
/** 打开弹出框 */
const openModal = () => {
  isDialog.value = true;
  console.log('three1');
}
/** 关闭弹出框 */
const closeModal = () => {
  isDialog.value = false;
  emits('clearForm');
}
/** loading打开 */
const showLoading = () => {
  loading.value = true;
}
const closeLoading = () => {
  loading.value = false;
}
/** loading关闭 */
/** 点击取消 */
const cancelForm = () => {
  closeModal();
}
defineExpose({
  openModal,
  closeModal,
  showLoading,
  closeLoading
})

</script>
<style scoped lang='scss'>
.demo-drawer__footer {
  position: absolute;
  bottom: 30px;
}
</style>
